<template>
  <div class="ArrReportbox">
    <div class="leftbox">
      <EnterpriseTree @handleClick="handleClick"></EnterpriseTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div>
          <span>日期</span>
          <span>
            <el-date-picker v-model="value1" size="small" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </span>
          <span>
            <el-button type="primary" size="small" @click="handlePrevDay">上一日</el-button>
            <el-button type="primary" size="small" @click="handleNextDay">下一日</el-button>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重置</el-button>
          <el-button type="primary" size="small" @click="gettablelist">查询</el-button>
        </div>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>整点报表</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="table">
          <TableColumn
            ref="tablecolumn"
            :issize="issize"
            :tableData="tableData" 
            :tableConfig="tableConfig" >
            <el-table-column
              prop="name"
              fixed
              width="120"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="param"
              width="120"
              fixed
              label="采集设备">
            </el-table-column>
            <el-table-column
              v-for="(item,index) in 24"
              :key="index"
              :prop="index+'时'"
              align="right"
              :label="index+'时'">
            </el-table-column>
          </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import request from '@/utils/request'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import EnterpriseTree from '@/components/EnterpriseTree/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    EnterpriseTree,
    TableColumn,
    TopTile
  },
  data() {
    return {
      value1: '',
      issize: 'medium',
      tableData: [],
      tableConfig: [],
      treevalue:{}
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    // 树节点点击
    handleClick(val) {
      this.treevalue = val
      if (val.className == 'Bay') {
        this.gettablelist()
      } else {
        this.tableData=[]
      }
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tablecolumn.loadind = true
      const className=encodeURIComponent(this.treevalue.name)
      const { data: { list } } = await request.get(`pio-microservice-biz/pio/ect/report/form/hourly/meter/reading/list?dateTime=${this.value1}
      &classId=${this.treevalue.id}&className=${className}`)
      list.forEach(ele => {
        ele.valueList.forEach((item, index) => {
          ele[`${index}时`] = item;
        });
      });
      this.tableData = list
      this.$refs.tablecolumn.loadind=false
    },
    // 获取上一日日期
    handlePrevDay() {
      this.value1 = moment(this.value1).subtract(1, 'days').format('YYYY-MM-DD');
    },
    // 获取下一日日期
    handleNextDay() {
      this.value1 = moment(this.value1).add(1, 'days').format('YYYY-MM-DD');
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    //重置
    chongzhi() {
      this.gettime()
      this.gettablelist()
    },
    // 导出
    daochu() {
      const className=encodeURIComponent(this.treevalue.name)
      exportexcel('pio-microservice-biz/pio/ect/report/form/hourly/meter/reading/exportExcel',{
        dateTime:this.value1,classId:this.treevalue.id,className:className
      },'需量分析')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1=year+'-'+month+'-'+day
    },
  },
};
</script>

<style scoped>
.ArrReportbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    background-color: #fff;
    padding: 20px;
    height: 100%;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    margin-left: 10px;
    .righttop{
      height: 80px;
      line-height: 80px;
      background-color: #fff;
      padding: 0 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      span{
        color: #606266;
        font-size: 14px;
        margin-right: 15px;
      }
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title{
        display:flex;
        justify-content:space-between;
      }
      .table{
        height: 94%;
        margin-top: 10px;
      }
    }
  }
}
</style>